<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<style type="text/css">
.addForm {
	width: 100px;
}
label{
	cursor: pointer;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("input[name=parentMenu]").click(function(){
			if($(this).is(":checked")){
				$("input[id="+$(this).val()+"]").prop("checked",true);
			}else{
				$("input[id="+$(this).val()+"]").prop("checked",false);
			}
		});
		$("input[name=childMenu]").click(function(){
			if($(this).is(":checked")){
				$("input[value="+$(this).attr("id")+"]").prop("checked",true);
			}else{
				var flag=true;
				$("input[id="+$(this).attr("id")+"]").each(function(){
					if($(this).is(":checked")){
						flag=false;
						return;
					}
				});
				if(flag){
					$("input[value="+$(this).attr("id")+"]").prop("checked",false);
				}
			}
		});
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var id = $(".modal-body input[name=id]").val();
			var name = $(".modal-body input[name=name]").val();
			var priority = $(".modal-body input[name=priority]").val();
			var content = $(".modal-body textarea[name=content]").val();
			var menus="";
			$("input[type=checkbox]:checked").each(function(index){
				if(index==0){
					menus=$(this).val();
				}else{
					menus+=","+$(this).val();
				}
			});
			if (name == "") {
				$.messager.alert("角色名不能为空");
				return false;
			}
			var reg = /^[0-9]*$/;
			if (priority != "" && !reg.test(priority)) {
				$.messager.alert("排序值只能为数字");
				return false;
			}
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : "edit",
				data : "t=" + Math.round(999 * Math.random()) + "&id=" + id + "&name=" + name + "&priority=" + priority + "&content=" + content + "&menus=" + menus,
				success : function(result) {
					if (result.code == 0) {
						$(this).removeAttr("disabled");
						alert("保存成功");
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$("#add").click(function() {
			$(".modal-body input[type=text]").val("");
			$(".modal-body textarea").val("");
			$("input[type=checkbox]").removeAttr("checked");
			$("#editModal").modal('show');
		});
		$("#closeModal").click(function() {
			$("#editModal").modal('hide');
		});
		$(".edit").click(function() {
			var roleId = $(this).attr("roleId");
			$.ajax({
				type : "POST",
				url : "info?roleId=" + roleId,
				data : "t=" + Math.round(999 * Math.random()),
				success : function(result) {
					if (result.code == 0) {
						$("input[type=checkbox]").removeAttr("checked");
						$(".modal-body input[name=id]").val(result.content.id);
						$(".modal-body input[name=name]").val(result.content.name);
						$(".modal-body input[name=priority]").val(result.content.priority);
						$(".modal-body textarea[name=content]").val(result.content.content);
						var menus=result.content.menus;
						if (menus!="" && menus!=null) {
			        		for ( var i = 0; i < menus.length; i++) {
			        			$("input[type=checkbox]").each(function(){	
					        		if(menus[i].menu_id==$(this).attr("value")){
					        			$(this).prop("checked",true);  
									}
			        			});
			        		}
					    }
						$("#editModal").modal('show');
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$(".revoke").click(function() {
			var roleId = $(this).attr("roleId");
			if (confirm("确定删除角色？")) {
				$.ajax({
					type : "POST",
					url : "revoke?roleId=" + roleId,
					data : "t=" + Math.round(999 * Math.random()),
					success : function(result) {
						if (result.code == 0) {
							location.reload();
						} else {
							alert(result.msg);
						}
					}
				});
			}
		});
	});
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>角色列表</h2>
		</div>
		<br/>
		<button id="add" type="button" class="btn btn-info">新增角色</button>
		<br><br/>
		<div class="table-responsive">
			<table class="table-striped table-hover table table-bordered">
				<tr>
					<th>角色名称</th>
					<th>角色菜单</th>
					<th>角色描述</th>
					<th>排序值</th>
					<th>操作</th>
				</tr>
				<c:forEach var="data" items="${page.data}">
					<tr>
						<td><a class="edit" roleId="${data.id}">${data.name}</a></td>
						<td>
							<c:forEach var="parentMenu" items="${data.menuList}">	
								<c:if test="${parentMenu.parent_id==0}">
									<font color="#31b0d5"><i class="${parentMenu.icon}"></i>&nbsp;${parentMenu.name}</font>
									<c:forEach var="childMenu" items="${data.menuList}">
										<c:if test="${childMenu.parent_id==parentMenu.id}">
											${childMenu.name}
										</c:if>
									</c:forEach>
									<br/>
								</c:if>
							</c:forEach>
						</td>
						<td>${data.content}</td>
						<td>${data.priority}</td>
						<td>
							<a class="edit" roleId="${data.id}">编辑</a>&nbsp;&nbsp; 
							<a class="revoke" roleId="${data.id}">删除</a>
						</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<my:pagination pageData="${page}" url="/role/list" urlParam="${urlParam}" />
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 700px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">编辑角色信息</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" name="id">
					<table id="editTable" class="table-hover table table-bordered">
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">角色名称</span> 
									<input type="text" class="form-control" name="name" placeholder="角色名称" style="width: 450px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">排序值</span> 
									<input type="text" class="form-control" name="priority" placeholder="排序值" style="width: 450px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">描述</span> 
									<textarea name="content" class="form-control" placeholder="描述" style="width: 450px;"></textarea>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<table class="table table-bordered table-hover">
									<tr>
										<td style="width:100px;background:#eee;text-align: center;">选择菜单</td>
										<td>
											<table class="table-striped table table-bordered table-condensed table-hover">
												<c:forEach items="${menuMap}" var="map">
													<tr>
														<td><font color="#31b0d5"><label><input type="checkbox" name="parentMenu" value="${map.key.id}">&nbsp;${map.key.name}</label></font></td>
														<td>
															<c:forEach items="${map.value}" var="menu">
																<label><input type="checkbox" id="${menu.parent_id}" name="childMenu" value="${menu.id}">&nbsp;${menu.name}</label>&nbsp;&nbsp;
															</c:forEach>
														</td>
													</tr>
												</c:forEach>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td align="center">
								<button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button id="closeModal" type="button" class="btn btn-danger addForm">关闭</button>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>

</body>